<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- 适应移动端end -->
    <title>PC预览</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            height: 100%;
            flex-direction: column;
        }

        body::-webkit-scrollbar {
            width: 0;
            background: transparent;
        }

        .header {
            z-index: 100;
            display: fixed;
            width: 100%;
            height: 50px;
            background: #f5f5f5;
            box-shadow: 0 0 10px 0 rgba(154, 141, 141, 0.6);
            text-align: center;
            line-height: 50px;
            color: #333;
        }

        .warp {
            position: relative;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        iframe {
            z-index: 99;
            margin: 0 auto;
            max-width: 414px;
            border: 1px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .2);
        }

        iframe::-webkit-scrollbar {
            display: none;
        }

        .erweima {
            position: absolute;
            top: 50%;
            margin-top: -120px;
            right: 50px;
            width: 180px;
            height: 180px;
            background: skyblue;
            color: #fff;
            text-align: center;
        }

        @media screen and (max-width: 768px) {
            .erweima {
                right: 0;
            }
        }

        @media screen and (max-width: 750px) {
            .header {
                display: none;
            }
        }
    </style>
</head>

<body>
    <!-- header -->
    <div class="header">预览</div>
    <!-- warp -->
    <div class="warp">
        <!-- <iframe src="https://youzan.github.io/vant/mobile.html#/zh-CN/" id="iframeId" frameborder="0" width="100%" height="100%"></iframe> -->
        <iframe src="http://localhost:8080" id="iframeId" frameborder="0" width="100%" height="100%"></iframe>
        <div class="erweima">扫码用手机查看</div>
    </div>
</body>

</html>